<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="d3.v4.min.js"></script>
    <script>
        const svg = d3.select('body')
        .append("svg")
        .attr('width',960)
        .attr('height',960)

        const color = d3.schemeCategory20

        d3.csv('d2.csv',(err,data)=>{
            if(err) throw err;

            svg.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .attr('cx',d=>{
                return d.x*Math.random()
            })
            .attr('cy',d=>{
                return d.y*Math.random()
            })
            .attr('r',5)
            .attr('fill',(d,i)=>{
                return color[i%20]
            })
        })
    </script>
</body>
</html>